<template>
	<div class="page">
		<p class="title">单个下拉</p>
		<gr-droplist :options="options4" v-model="filter4"/>
		
		<p class="title">自定义选中颜色</p>
		<gr-droplist selectColor="#2196f3" :options="options4" v-model="filter4"/>
		
		<p class="title">多个下拉组合</p>
		<p style="display: flex;">
			<span style="flex-grow: 1;">
				<gr-droplist :options="options1" v-model="filter1"/>
			</span>
			<span style="flex-grow: 1;">
				<gr-droplist :options="options2" v-model="filter2"/>
			</span>
			<span style="flex-grow: 1;">
				<gr-droplist :options="options3" v-model="filter3"/>
			</span>
		</p>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				filter1: 'bbb',
				options1: [
					{ text: 'AAA', value: 'aaa'},
					{ text: 'BBB', value: 'bbb'},
					{ text: 'CCC', value: 'ccc'}
				],
				filter2: 'fff',
				options2: [
					{ text: 'DDD', value: 'ddd'},
					{ text: 'EEE', value: 'eee'},
					{ text: 'FFF', value: 'fff'}
				],
				filter3: 'ggg',
				options3: [
					{ text: 'GGG', value: 'ggg'},
					{ text: 'HHH', value: 'hhh'},
					{ text: 'JJJ', value: 'jjj'}
				],
				filter4: 1,
				options4: [
					{ text: '默认排序', value: 1},
					{ text: '价格由高到低', value: 2},
					{ text: '价格由低到高', value: 3}
				]
			}
		},
		mounted() {
		},
		methods: {
			test1() {
				this.$toast.show('您点击了图标')
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #F5F5F5;
	}
	p.title {
		margin: 30px 0 4px !important;
		padding-left: 10px !important;
		color: #ee8031;
	}
</style>
